{% extends 'base.html' %}

{% block content %}
<div class="columns is-centered">
    <div class="column is-5">
        <p class="subtitle has-text-white">Wyze credentials required to complete authentication.</p>
        <nav class="navbar block is-dark fs-display-none">
            <div class="navbar-brand">
                <a data-target="apiLogin" class="navbar-item is-tab is-active">
                    <span class="icon-text">
                        <span class="icon"><i class="fas fa-key"></i></span> <span>API Key</span></span></a>
                <a data-target="tokenLogin" class="navbar-item is-tab">
                    <span class="icon-text"><span class="icon"><i
                                class="fas fa-address-card"></i></span><span>Token</span></span></a>
            </div>
        </nav>
        <form id="apiLogin" class="box">
            <div class="error"></div>
            <div class="notification is-info">
                <span class="icon"><i class="fas fa-circle-info"></i></span> Wyze API Key and ID can be obtained from
                the <a href="https://developer-api-console.wyze.com/#/apikey/view" target="_blank">Wyze
                    Developer Portal</a>.
            </div>
            <div class="field">
                <label for="" class="label">Email</label>
                <div class="control has-icons-left">
                    <input name="email" type="email" placeholder="e.g. me@mail.com" class="input" required>
                    <span class="icon is-small is-left">
                        <i class="fa fa-envelope"></i>
                    </span>
                </div>
            </div>
            <div class="field">
                <label for="" class="label">Password</label>
                <div class="control has-icons-left">
                    <input name="password" type="password" placeholder="*******" class="input" required>
                    <span class="icon is-small is-left">
                        <i class="fa fa-lock"></i>
                    </span>
                </div>
            </div>
            <div class="field">
                <label for="" class="label">API ID</label>
                <div class="control has-icons-left">
                    <input name="keyId" type="text" placeholder="Key ID" class="input" pattern=".{36}"
                        title="Key ID is 36 characters" required>
                    <span class="icon is-small is-left">
                        <i class="fa fa-fingerprint"></i>
                    </span>
                </div>
            </div>
            <div class="field">
                <label for="" class="label">API Key</label>
                <div class="control has-icons-left">
                    <input name="apiKey" type="text" placeholder="API Key" class="input" pattern=".{60}"
                        title="API Key is 60 characters" required>
                    <span class="icon is-small is-left">
                        <i class="fa fa-key"></i>
                    </span>
                </div>
            </div>
            <div class="field">
                <button id="submitLogin" class="button is-success is-large is-fullwidth">
                    Login
                </button>
            </div>
        </form>
        <form id="tokenLogin" class="box is-hidden">
            <div class="error"></div>
            <div class="field">
                <label for="" class="label">Access Tokens</label>
                <div class="control has-icons-left">
                    <input name="tokens" type="text" placeholder="access tokens" class="input">
                    <span class="icon is-small is-left">
                        <i class="fa fa-address-card"></i>
                    </span>
                </div>
            </div>
            <div class="field">
                <label for="" class="label">Refresh Token</label>
                <div class="control has-icons-left">
                    <input name="refresh" type="text" placeholder="refresh token" class="input">
                    <span class="icon is-small is-left">
                        <i class="fa fa-arrows-rotate"></i>
                    </span>
                </div>
            </div>
            <div class="field">
                <button class="button is-success is-large is-fullwidth">
                    Login
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        const button = form.querySelector('button.button').classList;
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            button.add("is-loading");
            fetch("login", {
                method: 'POST',
                body: new FormData(form)
            }).then(resp => resp.json()).then(data => {
                if (data.status == "success") {
                    form.innerHTML = '<article class="message is-success container"><div class="message-body"><span class="icon"><i class="fas fa-check-circle"></i></span><span>Attempting login. <i class="fas fa-spinner fa-pulse"></i></div></article>';
                    setTimeout(() => { window.location = '.'; }, 5000);
                } else {
                    console.error(data);
                    button.remove("is-loading");
                    form.querySelector(".error").innerHTML = '<article class="message is-danger container"><div class="message-body"><span class="icon"><i class="fas fa-circle-exclamation"></i></span><span>' + data.status + '. Please try again.</div></article>';
                }
            }).catch(error => { console.error(error); });
        });
    });
    const tabs = document.querySelectorAll('a.navbar-item');
    tabs.forEach(tab => {
        tab.addEventListener('click', function () {
            const targetFormId = this.getAttribute('data-target');
            document.querySelectorAll('form').forEach(form => {
                form.classList.toggle('is-hidden', form.id !== targetFormId);
            });
            tabs.forEach(otherTab => {
                otherTab.classList.toggle('is-active', otherTab === tab);
            });
        });
    });

</script>
{% endblock %}